<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' media='print' />
<script type='text/javascript' src='../jquery/jquery-1.5.2.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script type='text/javascript' src='../jquery/jquery.qtip-1.0.0-rc3.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.8.11.custom.min.js'></script>

<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>

<script type='text/javascript'>
	$(document).ready(function() {
	
		var new_event_dia = $('#new_event_dialog').dialog({
				autoOpen: false,
				title: 'Basic Dialog'
			});
		
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
		    eventSources: [
				// json event source
				{
				    url: '../rest/events', // use the `url` property
				    color: 'chartreuse ',
				    textColor: 'black',
				    data: { // appends any other information to query
				    	tzoffset_browser: date.getTimezoneOffset() // for UTC
				    }
				}
				// any other sources...
	  		    ],
			ignoreTimezone: false, // make use of timezone info in time data
			lazyFetching: false, // re-fetch events often
			selectable: true,
			selectHelper: true,
			
			select: function(start, end, allDay) {
// 				var title = prompt('Event Title:');
				new_event_dia.dialog('open');
				if (title) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
				calendar.fullCalendar('unselect');
			},
			editable: true,
			eventClick: function(event, element) {
		        event.title = "CLICKED!";
		        event.color = 'red';
		        $('#calendar').fullCalendar('updateEvent', event);
		    },
		    eventRender: function(event, element) { 
		    	element.qtip({
		            content: {
		                title: { text: event.title },
		                text: '<span class="title">Start: </span>' +
		                ($.fullCalendar.formatDate(event.start, 'ddd, MMMM d h:mmTT')) +
		                '<br>End: ' +
		                ($.fullCalendar.formatDate(event.end, 'ddd, MMMM d h:mmTT')) +
		                '<br><span class="title">Description: </span>' + event.description       
		            },
		            show: { 
		            	solo: false,
		            	delay: 0
		            },
		            hide: { delay: 0 },
		            position: {
		            	corner: {
		            		target: 'topMiddle',
		            		tooltip: 'bottomMiddle'
		            	}
		            },
		            style: { 
		                width: 250,
		                padding: 1,
		                color: 'black',
		                textAlign: 'left',
		                border: {
		                width: 1,
		                radius: 3
		            },
		            tip: 'bottomMiddle',

		            classes: { 
	                    tooltip: 'ui-widget', 
	                    tip: 'ui-widget', 
	                    title: 'ui-widget-header', 
	                    content: 'ui-widget-content' 
		             } 
		           } 
		        });
		    },
			//weekends: false, // will hide Saturdays and Sundays
			defaultView: 'agendaWeek'
		});
		
	});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

</head>
<body>

<div id='calendar' style="width:700px;"></div>

<div id="new_event_dialog" title="Basic dialog">
	<form>
		Event Title: <input type="text" name=title value="Enter a title." onclick="document.eventform.title.value='';" />
		
		<br>
		Event Content: <br> <textarea name=content rows="10" cols="30" onclick="document.eventform.content.value='';">
		Enter event details here
		</textarea>
		<input type="submit" value="Submit" />
	</form>
</div>

</body>
</html>
